<template>
  <div class="container">
    <div class="handle-box">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple">
            <el-button @click="deleteAll">批量删除</el-button>
          </div></el-col
        >
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">
            <el-input
              v-model="searchWord"
              placeholder="筛选关键词"
            ></el-input></div
        ></el-col>
      </el-row>
    </div>
    <!-- 购物车商品 -->
    <el-table
      border
      size="small"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选框 -->
      <el-table-column
        type="selection"
        width="40"
        align="center"
      ></el-table-column>
      <el-table-column
        label="编号"
        prop="id"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        label="SongId"
        prop="songId"
        width="50"
        align="center"
        v-if="false"
      ></el-table-column>
      <el-table-column label="歌单图片" width="110" align="center" v-if="false">
        <template v-slot="scope">
          <img :src="scope.row.image" style="width: 120px" />
        </template>
      </el-table-column>
      <el-table-column prop="songName" label="歌曲名" />
      <el-table-column label="单价" width="180" align="center">
        <template v-slot="scope">
          <span>￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button type="danger" @click="deleteRow(scope.row.songId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-button @click="cartToPay()" type="danger">支 付</el-button>
        </div></el-col
      >
    </el-row>
    <!-- <div style="margin: 20px;">
       
    </div>  -->
    <el-pagination
      class="pagination"
      background
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <!-- 删除提示框 -->
  <yin-del-dialog
    :delVisible="delVisible"
    @confirm="confirm"
    @cancelRow="delVisible = $event"
  ></yin-del-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, ref, watch } from "vue";
import { HttpManager } from "@/api";
import YinDelDialog from "@/components/dialog/YinDelDialog.vue";
import { useUserStore } from "@/store";

export default defineComponent({
  components: {
    YinDelDialog,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useUserStore();
    // let activeName = 'first';
    const tableData = ref([]); // 记录购物车项，用于显示
    const tempDate = ref([]); // 记录购物车项，用于搜索时能临时记录一份购物车项列表
    const pageSize = ref(10); // 页数
    const currentPage = ref(1); // 当前页

    // 计算当前表格中的数据
    const data = computed(() => {
      return tableData.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
    });

    let userId = store.userId;

    const searchWord = ref(""); // 记录输入框输入的内容
    watch(searchWord, () => {
      if (searchWord.value === "") {
        tableData.value = tempDate.value;
      } else {
        tableData.value = [];
        for (let item of tempDate.value) {
          debugger;
          if (item.songName.includes(searchWord.value)) {
            tableData.value.push(item);
          }
        }
      }
    });

    getData();

    // 获取购物车项信息
    async function getData() {
      tableData.value = [];
      tempDate.value = [];
      const result = (await HttpManager.getCartList(userId)) as ResponseBody;
      tableData.value = result.data;
      tempDate.value = result.data;
      currentPage.value = 1;
    }

    // 获取当前页
    function handleCurrentChange(val) {
      currentPage.value = val;
    }

    function handleSelectionChange(val) {
      multipleSelection.value = val;
      multipleToPay.value = val;
    }

    /**
     * 删除
     */
    const delSongIds = ref([]); // 记录当前要删除的行
    const multipleSelection = ref([]); // 记录当前要删除的列表
    const multipleToPay = ref([]); // 记录当前要支付的列表
    const delVisible = ref(false); // 显示删除框

    async function confirm() {
      const result = (await HttpManager.deleteCartList(
        userId,
        delSongIds.value
      )) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });
      if (result.success) getData();
      delVisible.value = false;
    }

    function deleteRow(id) {
      delSongIds.value.push(id);
      delVisible.value = true;
    }

    //批量删除
    function deleteAll() {
      for (let item of multipleSelection.value) {
        delSongIds.value.push(item.songId);
      }
      delVisible.value = true;
      multipleSelection.value = [];
    }

    // 获取购物车结算
    async function cartToPay() {
      //组装songIds
      let songIds = [];
      for (let item of multipleToPay.value) {
        songIds.push(item.songId);
      }
      if (!songIds.length) {
        (proxy as any).$message({
          message: "请选择要支付的歌曲",
          type: "warning",
        });
        return;
      }
      const result = (await HttpManager.toPay(
        songIds,
        userId,
        2
      )) as ResponseBody;
      if (result.success) {
        const divForm = document.getElementsByTagName("div");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement("div");
        div.innerHTML = result.data;
        document.body.appendChild(div);

        document.forms[0].setAttribute("target", "_self"); //_blank新开窗口跳转
        document.forms[0].submit();
      } else {
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
      }

      multipleToPay.value = [];
    }

    return {
      searchWord,
      data,
      userId,
      currentPage,
      pageSize,
      tableData,
      delVisible,
      deleteAll,
      cartToPay,
      confirm,
      deleteRow,
      handleCurrentChange,
      handleSelectionChange,
    };
  },
});
</script>

<style lang="scss" scoped></style>
